
<template>
  <!-- <view class="charts-box">
    <qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
  </view> -->
  <view>
    <image
      src="http://120.79.53.136:9000/food/icon/饮食.png"
      mode=""
      class="foodphoto"
    ></image>
    <image src="../../static/lxy/1.png" mode="" class="noFoodphoto"></image>
    <image src="https://fine-food.xiamu.icu/food/icon/运动.png" mode="" class="foodphoto"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: undefined,
        title: {
          name: "",
          fontSize: 25,
          color: "#2fc25b",
          offsetY: 0,
        },
        subtitle: {
          name: "",
          fontSize: 15,
          color: "#1890ff",
          offsetY: 0,
        },
        extra: {
          gauge: {
            type: "default",
            width: 24,
            labelColor: "#666666",
            startAngle: 0.85,
            endAngle: 0.15,
            startNumber: 0,
            endNumber: 200,
            labelFormat: "",
            splitLine: {
              fixRadius: -10,
              splitNumber: -1,
              width: 15,
              color: "#FFFFFF",
              childNumber: -1,
              childWidth: 12,
            },
            pointer: {
              width: 0,
              color: "auto",
            },
          },
        },
      },
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: [
            { value: 0.4, color: "#b3df63" },
            { value: 1, color: "#e6ebf8" },
          ],
          series: [
            {
              name: "完成率",
              data: 0,
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>